<template>
  <div class="dialog-wrapper">
    <Modal
      :title="title"
      width="850"
      footer-hide
      :value="value"
      :mask-closable="false"
      @on-cancel="handleCancel">
      <Form
        ref="form"
        :model="form"
        :rules="rules"
        :label-width="110"
        label-position="left">
        <Row>
          <Col span="11">
            <FormItem label="客户名称" prop="name">
              <Input type="text" placeholder="请输入客户名称" v-model="form.name" />
            </FormItem>
          </Col>
          <Col span="12" offset="1">
            <FormItem label="联系方式" prop="phone">
              <Input type="text" placeholder="请输入联系方式" v-model="form.phone" />
            </FormItem>
          </Col>
        </Row>
        <FormItem label="客户备注" prop="remark">
          <Input type="textarea" placeholder="请输入备注" v-model="form.remark" />
        </FormItem>
        <Divider />
        <Row>
          <Col span="11">
            <FormItem label="支付通道">
              <Select
                class="search-col"
                placeholder="请选择支付通道"
                style="margin-left: 0px;"
                v-model="form.payChannel"
              >
                <Option :value="0">虚拟账户</Option>
                <Option :value="1">易宝</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="12" offset="1" v-show="form.payChannel == 1">
            <FormItem label="支付通道商户号">
              <Input type="text" placeholder="输入支付通道商户号" v-model="form.payCustomerNo" />
            </FormItem>
          </Col>
        </Row>
        <Row v-show="form.payChannel == 1">
          <Col span="11">
            <FormItem label="商户支付AK">
              <Input type="text" placeholder="请输入商户支付ak" v-model="form.payAk" />
            </FormItem>
          </Col>
          <Col span="12" offset="1">
            <FormItem label="商户支付SK">
              <Input type="text" placeholder="请输入商户支付sk" v-model="form.paySk" />
            </FormItem>
          </Col>
        </Row>
        <Divider />
        <Row>
          <Col span="11">
            <FormItem label="分成比例" prop="profitRatio">
              <Input type="text" placeholder="请输入分成比例（例如：5:5）" v-model="form.profitRatio" />
            </FormItem>
          </Col>
          <Col span="12" offset="1">
            <FormItem label="客户状态" prop="status">
              <RadioGroup v-model="form.status">
                <Radio :label="0">上架</Radio>
                <Radio :label="1">下架</Radio>
              </RadioGroup>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="11">
            <FormItem label="贷款产品" prop="loanProductNo">
              <Select
                class="search-col"
                placeholder="请选择贷款产品"
                style="margin-left: 0px;"
                v-model="form.loanProductNo"
              >
                <Option
                  :value="item.loanProductNo"
                  v-for="(item, index) in loanProductNoList"
                  :key="index">{{ item.name }}</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <FormItem>
          <Button type="error"  @click="handleCancel" style="margin-right: 10px;">取消</Button>
          <Button type="primary"  @click="handleSubmit" :loading="btnLoading">确认提交</Button>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
  import qs from 'qs';
  export default {
    name: 'modalOperator',
    props: {
      title: String,
      type: String,
      value: {
        type: Boolean,
        default: false
      },
      formData: {
        type: Object,
        default: {
          name: '',
          phone: '',
          remark: '',
          payChannel: '', //支付渠道
          payCustomerNo: '', // 支付商户号
          payAk: '', // 商户支付AK
          paySk: '', // 商户支付SK
          profitRatio: '', //分成比例
          status: '', // 状态 0-上架， 1-下架
          loanProductNo: ''
        }
      }
    },
    data () {
      return {
        btnLoading: false,
        imgs: '',
        form: {},
        rules: {
          name: [
            { required: true, message: '请输入客户名称', trigger: 'blur' }
          ],
          // phone: [
          //   { required: true, message: '请输入联系方式', trigger: 'blur' }
          // ],
          // remark: [
          //   { required: true, message: '请输入备注', trigger: 'blur' }
          // ],
          payChannel: [
            { required: true, type: 'number', message: '请选择是否展示', trigger: 'change' }
          ],
          // payCustomerNo: [
          //   { required: true, message: '请输入支付商户号', trigger: 'blur' }
          // ],
          // payAk: [
          //   { required: true, message: '请输入商户支付AK', trigger: 'blur' }
          // ],
          // paySk: [
          //   { required: true, message: '请输入商户支付SK', trigger: 'blur' }
          // ],
          profitRatio: [
            { required: true, message: '请输入分成比例', trigger: 'blur' }
          ],
          status: [
            { required: true, type: 'number', message: '请选择是否展示', trigger: 'change' }
          ],
          loanProductNo: [
            { required: true, message: '请选择贷款产品', trigger: 'change' }
          ]
        },
        loanProductNoList: []
      }
    },
    watch: {
      value (newValue) {
        if (newValue) {
          this.form = this.formData;
          this.getLoanProductsList();
        }
      }
    },
    methods: {
      // 表单提交
      handleSubmit () {
        const { form } = this.$refs;
        form.validate(valid => {
          if (valid) {
            this.btnLoading = true;
            this.$http.post(`/helsinki/admin/investor/${this.type}`, qs.stringify({
              ...this.form
            }))
            .then(({ data: { errcode, info, data } }) => {
              if (errcode == 0) {
                let message = this.type === 'add' ? '新增客户成功' : '编辑客户信息成功';
                this.$Message.success(message);
                this.$emit('ok');
              }
              this.btnLoading = false;
            }, error => {
              this.btnLoading = false;
              console.log(error);
            });
          }
        })
      },
      handleCancel () {
        this.$refs.form.resetFields();
        this.$emit('input', false);
      },
      // 获取产品列表
      getLoanProductsList () {
        this.$http.post('/helsinki/admin/loan-products')
        .then(({ data: { data, errcode, info } }) => {
          if (errcode === 0) {
            let result = data.data;
            this.loanProductNoList = result.filter(item => item.loanProductNo !== 'all');
          }
        }, error => {
          console.log(error);
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .ivu-form .ivu-form-item-label {
    margin-bottom: 0;
  }

  .ivu-radio-wrapper {
    margin-bottom: 0;
  }

  .ivu-divider-horizontal {
    margin: 0 auto 24px;
  }
</style>
